﻿<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery.cycle.all-000-.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({ 
fx: 'fade', 
speed: 700,
timeout: 3000,
next: '#next', 
prev: '#prev' 
});
}); 
</script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
/* featured fade */
#wrapper-featured{
padding:10px 0 ;
width:650px;
height: 326px;
margin:0 ;
background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIf5_AoJI/AAAAAAAABTU/fV-Ca8f3_lI/s1600/bg_featured.jpg) no-repeat;
position:relative;
}
#wrapper-myslides {
width:550px;
height:210px;
padding: 0 0 ;
margin: 3px 0 0 10px;
position:relative;
float:left;
}
#myslides {
width:550px;
height:210px;
padding: 0 0 50px;
margin: 0 18px ;
overflow:hidden;
}
.panel{
width:550px;
height:210px;
}
#myslides img.crop-foto {
margin:8px 10px 10px 9px;
border:1px solid #fff;
display:block;
position:absolute;
right:3px;
top:0;
}
.featured-entry {
text-align:left;
line-height:1.5em;
font-style:italic;
font-size:12px;
font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
padding: 20px 10px 0;
width:280px;
color:#fff;
position:absolute;
top:0;
left:0;
}
h3.featured-title {
font-size:22px;
text-align:left;
font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
margin:10px 0 5px;
padding:0 0 5px;
font-weight:normal;
line-height:1em;
font-style:normal;
}
h3.featured-title a:link, h3.featured-title a:visited{
color:#fff;
}
h3.featured-title a:hover {
color:#b1e1ff;
}
#nav-slides a#prev {
position:absolute;
bottom:105px;
left:135px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(http://4.bp.blogspot.com/_j82W7u9kZbs/S4PIgGqiI2I/AAAAAAAABTc/TVJVRxgolPg/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(http://3.bp.blogspot.com/_j82W7u9kZbs/S4PIgrELHJI/AAAAAAAABTk/7fHHap-Uvks/s400/prev_hover.jpg) no-repeat;
}
#nav-slides a#next {
position:absolute;
bottom:105px;
left:160px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIg6l0qKI/AAAAAAAABTs/FA8fvPY0wlA/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(http://1.bp.blogspot.com/_j82W7u9kZbs/S4PIhJz7YvI/AAAAAAAABT0/B6PleC4jlUk/s400/next_hover.jpg) no-repeat;
}
</style>


<h3>» Using jQuery Slider Featured Posts (glory)</h3>



<div id="wrapper-featured">
<div id="wrapper-myslides">
<div id="myslides">
<div class="panel">
<div class="image-frame">
<a href="http://24work.blogspot.com/2012/01/how-to-change-mouse-cursor-in-blogger.html" target="_blank" rel="bookmark" title="How to change mouse cursor in blogger blog to animated cursors">
<img alt="How to change mouse cursor in blogger blog to animated cursors" class="crop-foto" height="185" src="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="http://24work.blogspot.com/2012/01/how-to-change-mouse-cursor-in-blogger.html" target="_blank" rel="bookmark" title="How to change mouse cursor in blogger blog to animated cursors">How to change mouse cursor in blogger blog to animated cursors</a></h3>
<p>How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your ....<a href="#">read more</a></p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="http://24work.blogspot.com/2012/01/numbered-page-navigation-for-blogger.html" target="_blank" rel="bookmark" title="Numbered Page Navigation For Blogger New Script">
<img alt="Numbered Page Navigation For Blogger New Script" class="crop-foto" height="185" src="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="http://24work.blogspot.com/2012/01/numbered-page-navigation-for-blogger.html" target="_blank" rel="bookmark" title="Numbered Page Navigation For Blogger New Script">Numbered Page Navigation For Blogger New Script</a></h3>
<p>Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="http://24work.blogspot.com/2011/12/how-to-add-snow-effect-on-blogger-mouse.html" target="_blank" rel="bookmark" title="How To Add Snow Effect On The Blogger Mouse Cursor Area">
<img alt="How To Add Snow Effect On The Blogger Mouse Cursor Area" class="crop-foto" height="185" src="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="http://24work.blogspot.com/2011/12/how-to-add-snow-effect-on-blogger-mouse.html" target="_blank" rel="bookmark" title="How To Add Snow Effect On The Blogger Mouse Cursor Area">How To Add Snow Effect On The Blogger Mouse Cursor Area</a></h3>
<p>How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog.</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="http://24work.blogspot.com/2012/01/falling-objects-falling-text-marquee.html" target="_blank" rel="bookmark" title="Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger">
<img alt="Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger" class="crop-foto" height="185" src="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="http://24work.blogspot.com/2012/01/falling-objects-falling-text-marquee.html" target="_blank" rel="bookmark" title="Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger">Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger</a></h3>
<p>You can show the falling objects or graphics to your Blogger profile page. This generator falling objects to specify an image of your choice.</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank" rel="bookmark" title="How To Add Animated Flash Clock To Your Blogger Blog">
<img alt="How To Add Animated Flash Clock To Your Blogger Blog" class="crop-foto" height="185" src="http://4.bp.blogspot.com/-XMxYEw2NibM/UhozkOB-YXI/AAAAAAAABJI/N6uGRQTwrXQ/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank" rel="bookmark" title="How To Add Animated Flash Clock To Your Blogger Blog">How To Add Animated Flash Clock To Your Blogger Blog</a></h3>
<p>Hello! `How are you guys? here"s the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog.</p>
</div><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id="nav-slides">
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
</div>
</div><!-- wrapper featured-->